<script>
</script>

<template>
	<!--top-banner部分start-->
	<div class="top-banner">
		<div class="w tb">
			<a href="#">
				<img src="../../assets/jd/topbanner.jpg" />
			</a>
			<a href="#" class="close-banner"></a>
		</div>
	</div>
	<!--top-banner部分end-->

	<!--search部分start-->
	<div class="search">
		<!--search部分start-->
		<div class="w clearfix">
			<div class="search-logo">
				<a href="http://www.jd.com" title="京西" target="_blank">京东官网</a>
			</div>
			<div class="search-input">
				<!--placeholder="运动相机"-->
				<input type="text" value="运动相机" />
				<button>搜索</button>
			</div>
			<div class="search-car">
				<a href="#">我的购物车</a>
				<i class="icon1"></i>
				<i class="icon2">&gt;</i>
				<i class="icon3">8</i>
			</div>
			<div class="search-moreAlink">
				<a href="#" class="col-red">出境999</a>
				<a href="#">沸腾厨卫</a>
				<a href="#">249减100</a>
				<a href="#">手机节</a>
				<a href="#">每150减50</a>
				<a href="#">男靴</a>
				<a href="#">巧克力</a>
				<a href="#">cool1手机</a>
				<a href="#">男士卫衣</a>
			</div>

		</div>
		<!--search部分end-->
	</div>
	<!--search部分end-->



</template>

<style scoped>
	.top-banner {
		background-color: #FD6500;
	}

	.tb {
		position: relative;
	}

	.close-banner {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 19px;
		height: 19px;
		background: url(../../assets/jd/close-banner.png);
	}

	.search-logo {
		float: left;
		width: 362px;
		height: 60px;
		padding: 20px 0;
	}

	.search-logo a {
		width: 270px;
		height: 60px;
		display: block;
		text-indent: -9999em;
		background: url(../../assets/jd/jdlogo.png) no-repeat;
	}

	.search-input {
		float: left;
		height: 36px;
		padding-top: 25px;
	}

	.search-input input {
		float: left;
		width: 450px;
		height: 32px;
		padding-left: 4px;
		font: 400 14px/32px "microsoft yahei";
		color: rgb(153, 153, 153);
		border: 2px solid #B61D1D;
		border-right: 0;
	}

	.search-input button {
		width: 82px;
		height: 36px;
		color: #fff;
		float: left;
		font: 400 16px/36px "微软雅黑";
		background-color: #B61D1D;
		cursor: pointer;
		/*cursor: pointer;          变成小手*/
		/*cursor: text;             变成光标*/
		/*cursor: move;             变成四角箭头*/
		/*cursor: default;          变成小白*/
	}

	.search-car {
		float: right;
		width: 96px;
		height: 34px;
		line-height: 34px;
		padding-left: 43px;
		position: relative;
		margin: 25px 65px 0 0;
		border: 1px solid #DFDFDF;
		background-color: #F9F9F9;
	}

	.icon1 {
		position: absolute;
		top: 9px;
		left: 18px;
		width: 18px;
		height: 16px;
		background: url(../../assets/jd/tel.png) no-repeat 0 -58px;
	}

	.icon2 {
		position: absolute;
		right: 10px;
		color: #999;
		/*font-family: "SimSun";*/
		font: 13px/34px "SimSun";
	}

	.icon3 {
		position: absolute;
		top: -5px;
		/*left: 0;*/
		width: 16px;
		height: 14px;
		background-color: #C81623;
		line-height: 14px;
		text-align: center;
		color: #fff;
		border-radius: 7px 7px 7px 0;
		/*画圆角矩形*/
	}
	
	.search-moreAlink {
	    float: left;
	    width: 530px;
	    height: 28px;
	    line-height: 28px;
	}
	.search-moreAlink a {
	    margin-right: 8px;
	}
</style>